<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授课录入系统</title>
    <script src="../js/vue.js"></script>
</head>
<body>

    <div id="app">
        <form action="">
            <fieldset>
                <legend>信息录入系统(vue版)</legend>
                姓名：<input type="text" placeholder="请输入姓名" v-model="newuser.name"><br>
                年龄：<input type="text" placeholder="请输入年龄" v-model="newuser.age"><br>
                性别：<select v-model="newuser.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select><br>

                手机：<input type="text" placeholder="请输入手机号" v-model="newuser.tel"><br>
                <input type="button" value="创建新用户" @click="add()">
            </fieldset>
        </form>
        <table border="1">
            <thead>
                <tr>
                    <th style="width: 150px;">姓名</th>
                    <th style="width: 100px;">性别</th>
                    <th style="width: 100px;">年龄</th>
                    <th style="width: 250px;">手机</th>
                    <th style="width: 100px;">删除</th>

                </tr>
            </thead>
            <tbody>
                <tr v-for="(i,index) in user">
                    <td>{{i.name}}</td>
                    <td>{{i.age}}</td>
                    <td>{{i.sex}}</td>
                    <td>{{i.tel}}</td>
                    <td><button @click="deletep(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                user: [  ],
                newuser: { name: "", age: "", sex: "", tel: "" }
            },
            methods: {
                add() {
                    this.user.push(this.newuser)
                    this.newuser = { name: "", age: "", sex: "", tel: "" }
                },
                deletep(index) {
                    this.user.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>